<template>
  <div>
    <h3>Course列表</h3>
    <ul>
      <li v-for="c in courseList" :key="c.id">
        <router-link :to="`/home/course/item/${c.id}/${c.title}?id2=${c.id}&title2=${c.title}`">{{c.title}}</router-link>
        &nbsp;
        <!-- params不能与path一起使用 -->
        <router-link 
          :to="{ 
            name: 'CourseItem', 
            params: {id: c.id, title: c.title},
            query: {id2: c.id, title2: c.title}
          }"
        >
          {{c.title}}
        </router-link>
      </li>
    </ul>
    <hr>
    <!-- 在此显示子路由组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Course',
  data () {
    return {
      courseList: [
        {id: 2, title: '前端'},
        {id: 3, title: '大数据'},
        {id: 4, title: 'Java'}
      ]
    }
  }
}
</script>

<style scoped>

</style>
